<template>
  <div>
    <!-- 竞赛总览 -->
    <div class="contest_bg">
      <div class="contest">
        <div class="contest_logo">
          <img :src="info.iconPath" />
        </div>
        <div class="contest_info">
          <div class="contest_title">
            <div>
              <p class="title_text">{{info.name}}</p>
              <div v-if="info.matchType == 1" class="contest_type timing-color">计时赛</div>
              <div v-if="info.matchType == 2" class="contest_type simulation-color">模拟赛</div>
              <div v-if="info.matchType == 3" class="contest_type free-color">自由练习</div>
              <!-- <div class="contest_type">计时赛</div> -->
            </div>
            <!-- <div class="contest_status">进行中</div> -->
            <div class="contest_status">
              <span v-if="info.matchStatus == 1">报名中</span>
              <span v-if="info.matchStatus == 2">进行中</span>
              <span v-if="info.matchStatus == 3">已结束</span>
            </div>
          </div>
          <div class="title_explain">{{ info.introduction }}</div>
          <div class="time">比赛时间：{{ info.startTime }}<span style="margin:0 10px 0 10px">-</span>{{ info.endTime }}</div>
          <!-- 倒计时 -->
          <div class="count_down" v-if="info.matchStatus == 1 && info.matchType != 3" v-html="getTime(secDown)"></div>
          <!-- 比赛类型 -->
          <div class="contest_type2">
            <div v-if="info.form == 1" class="type">个人赛</div>
            <div v-if="info.form == 2" class="type">小组赛</div>
            <div class="people_nums">已报名人数：{{ info.applyUserNum }}</div>
          </div>
          <!-- <div class="contest_type2">
            <div class="type">小组赛</div>
            <div class="people_nums">已报名人数：955</div>
          </div> -->
        </div>
      </div>
    </div>
    <!-- 任务列表 -->
    <div class="task_list">
      <!-- 左侧任务列表 -->
      <ul class="list_left">
        <li class="task_item" v-for="(item, index) in taskList" :key="item.taskId" @click="goToExperimentalEnvironment(item)">
          <div class="task_logo">
            <img :src="[index >= 10 ? task_logo[index % 10] : task_logo[index]]" />
          </div>
          <div class="task_info">
            <div class="task_title">
              <div class="task_title_text">
                任务{{ index + 1 }}：{{ item.name }}
              </div>
              <div v-if="item.reportSubmited" class="task_type_wait">
                未开始
              </div>
              <div v-else class="task_type_finish">挑战完成</div>
            </div>
            <div class="task_explain">
              {{ item.introduction }}
            </div>
          </div>
        </li>
      </ul>
      <!-- 右侧统计信息 -->
      <div class="list_right">
        <!-- 竞赛统计-->
        <div class="contest_statistics">
          <div class="statistics_title">赛题统计</div>
          <div class="team_info" @click="dialogTableVisible = true">
            团队信息
          </div>
          <!-- 团队信息Table -->
          <el-dialog title="团队名称" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
              <el-table-column property="name" label="姓名"></el-table-column>
              <el-table-column property="date" label="帐号"></el-table-column>
            </el-table>
          </el-dialog>
          <!-- 团队信息Table   end -->
          <div class="statistics_echarts">
            <!-- echarts图 -->
            <div class="echarts" id="statistic_echarts"></div>
            <!-- 统计信息 -->
            <div class="echarts_info">
              <div class="submit_info">
                <div class="yes">
                  <span style="margin-right: 10px">
                    <span style="color: #91cc75">{{
                      competitionLive.submitReportNum
                    }}</span>/{{ totalReports }} </span>已提交
                  <img src="@/assets/images/yes.png" alt="√" />
                </div>
                <div class="no">
                  <span style="margin-right: 10px">{{ competitionLive.unSubmitReportNum }}/{{
                      totalReports
                    }}</span>未提交
                  <img src="@/assets/images/no.png" alt="x" />
                </div>
              </div>
              <!-- <div class="my_rank">
                <span style="margin-right: 10px">我的成绩</span> 第<span style="color: red">2</span>名
              </div> -->
            </div>
          </div>
        </div>
        <!-- 排行榜 -->
        <div class="contest_Rank">
          <div class="rank_title">排行榜</div>
          <ul class="rank">
            <li class="rank_item" v-for="(item, index) in competitionLive.schedule" :key="index">
              <img :src="rank_logo[index]" />
              <div class="name">{{ item.teamName }}</div>
              <div class="number_and_time">
                <p class="task_number">
                  <span style="marigin-right: 5px">{{
                    item.submitReportNum
                  }}</span>任务
                </p>
                <p class="time" style="color: blue">{{ item.time }}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import {
  getTaskListTSCP,
  getLiveTSCP,
  getLiveWebsocketTSCP,
} from '@/api/competitionPlatform'

export default {
  name: 'CourseDetail',
  data() {
    return {
      //任务列表
      taskList: [],
      //任务图标
      task_logo: [
        require('@/assets/images/0.png'),
        require('@/assets/images/1.png'),
        require('@/assets/images/2.png'),
        require('@/assets/images/3.png'),
        require('@/assets/images/4.png'),
        require('@/assets/images/5.png'),
        require('@/assets/images/6.png'),
        require('@/assets/images/7.png'),
        require('@/assets/images/8.png'),
        require('@/assets/images/9.png'),
      ],
      //排行榜图标
      rank_logo: [
        require('@/assets/images/first.png'),
        require('@/assets/images/second.png'),
        require('@/assets/images/third.png'),
        require('@/assets/images/fourth.png'),
        require('@/assets/images/fifth.png'),
      ],
      //竞赛实况包括提交任务相关信息和排行榜
      competitionLive: {},
      // 团队信息列表
      gridData: [],
      // 团队信息弹窗开关
      dialogTableVisible: false,
      submitReportNum: 0,
      unSubmitReportNum: 0,
      //课程id
      courseId: 0,
      //课程信息
      info: {
        applyEndTime: '',
        applyStartTime: '',
        applyUserNum: 0,
        computeAuto: false,
        computeAutoRadio: 0,
        computeSubjective: false,
        computeSubjectiveRadio: 0,
        computeTime: false,
        computeTimeRadio: 0,
        courseBasicId: 0,
        courseOutline: false,
        deleted: false,
        direction: [[0]],
        endTime: '',
        form: 0,
        formGroupNum: 0,
        icon: 0,
        iconPath: '',
        id: 0,
        imageLoadTypeStr: '',
        introduction: '',
        isApply: false,
        judgeButton: false,
        matchStatus: 0,
        matchType: 0,
        name: '',
        ownCourse: false,
        preseted: false,
        reportForm: 0,
        startTime: '',
        status: 0,
        typeName: '',
      },
      // 倒计时
      secDown: '',
      // 角色id
      roleId: '',
    }
  },
  created() {
    // 角色id
    this.roleId = this.$store.state.user.roles[0]
    //课程id
    this.courseId = this.$localstorage.getLocalStorage('setCourseId')
    //获取课程信息
    this.getInfo()
    //获取任务列表
    this.getTaskList()
    //实时获取竞赛实况
    this.getCompetitionLive()
    // this.updateCompetitionLive()
  },
  mounted() {},
  computed: {
    //计算报告总数
    totalReports() {
      return (
        this.competitionLive.submitReportNum +
        this.competitionLive.unSubmitReportNum
      )
    },
  },
  methods: {
    //前往实验环境
    goToExperimentalEnvironment(item) {
      //判断条件集合学生还是老师，有无虚机环境
      // item.vmConfig=false;
      const conditions = new Map([
        [
          { vmConfig: true, roleId: 'TEACHER' },
          () => {
            this.$router.push({
              path: '/Teaching/MyCourses/VirtualMachine',
              query: { courseName:this.info.name, taskName:item.name,courseId: this.courseId, taskId: item.taskId ,chapterId:item.chapterId},
            })
          },
        ],
        [
          { vmConfig: true, roleId: 'STUDENT' },
          () => {
            this.$router.push({
              path: '/Teaching/MyCourses/STVirtualMachine',
              query: {courseName:this.info.name, taskName:item.name,courseId: this.courseId, taskId: item.taskId ,chapterId:item.chapterId},
            })
          },
        ],
        [
          { vmConfig: false, roleId: 'TEACHER' },
          () => {
            this.$router.push({
              path: '/Teaching/MyCourses/VirtualMachineManual',
              query: {
                courseId: this.courseId,
                chapterId: item.chapterId,
                taskId: item.taskId,
                roleId: this.roleId,
              },
            })
          },
        ],
        [
          { vmConfig: false, roleId: 'STUDENT' },
          () => {
            this.$router.push({
              path: '/Teaching/MyCourses/VirtualMachineManual',
              query: {
                courseId: this.courseId,
                chapterId: item.chapterId,
                taskId: item.taskId,
                roleId: this.roleId,
              },
            })
          },
        ],
      ]);
      [...conditions].forEach(([key, value]) => {
        key.vmConfig === item.vmConfig && key.roleId === this.roleId
          ? value.call()
          : ''
      })
    },
    //获取课程信息
    getInfo() {
      const loading = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      this.$http
        .get(`/tes/match/info/${this.courseId}`)
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            this.info = res.data
            this.secDown = res.data.countDown
            //自由练习没有倒计时、开始比赛和已结束没有倒计时
            let isTimeDown =
              res.data.matchType != 3 && res.data.matchStatus == 1
            if (isTimeDown) {
              this.setTimer()
            }
          } else {
            this.$message.error(res.message)
          }
          loading.close()
        })
        .catch((err) => {
          console.log(err)
          loading.close()
        })
    },
    // 获取任务列表
    getTaskList() {
      console.log('任务列表');
      getTaskListTSCP(this.courseId)
        .then((res) => {
          console.log('获取任务列表', res)
          if (res.code == '200') {
            this.taskList = res.data
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //获取竞赛实况
    getCompetitionLive() {
      getLiveTSCP(this.courseId)
        .then((res) => {
          console.log('竞赛实况',res);
          if (res.code == '200') {
            this.competitionLive = res.data
          } else {
            this.$message.error(res.message)
          }
        })
        .then(() => {
          this.getEcharts()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //实时获取竞赛实况
    updateCompetitionLive() {
      getLiveWebsocketTSCP()
        .then((res) => {
          if (res.type == 31) {
            this.competitionLive = res.reportSchedule
            this.courseId = res.courseId
          } else {
            // this.getCompetitionLive()
          }
        })
        .then(() => {
          this.getEcharts()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //秒转时分
    getTime(sec) {
      console.log(sec, 255)
      //日
      let day = Math.floor(sec / 60 / 60 / 24)
      sec = sec - day * 60 * 60 * 24
      //时
      let hour = Math.floor(sec / 60 / 60)
      sec = sec - hour * 60 * 60
      hour = hour < 10 ? `0${hour}` : hour
      console.log(hour, 21)
      //分
      let minute = Math.floor(sec / 60)
      sec = sec - minute * 60
      minute = minute < 10 ? `0${minute}` : minute
      //秒
      sec = sec < 10 ? `0${sec}` : sec
      return `离报名结束<span>${day}</span>天<span>${hour}</span>时<span>${minute}</span>分<span>${sec}</span>秒`
    },
    //定时器 考试时间计算
    setTimer() {
      if (this.timer == null) {
        let self = this
        self.timer = setInterval(() => {
          if (self.secDown <= 0) {
            clearInterval(self.timer)
            return
          }
          self.secDown--
          console.log(self.secDown, 299)
        }, 1000)
      }
    },
    // echart图
    getEcharts() {
      var chartDom = document.getElementById('statistic_echarts')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        color: ['#91cc75', '#5470c6'],
        tooltip: {
          trigger: 'item',
        },
        series: [
          {
            name: '提交统计',
            type: 'pie',
            radius: ['40%', '80%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '12',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: this.competitionLive.submitReportNum, name: '已提交' },
              { value: this.competitionLive.unSubmitReportNum, name: '未提交' },
            ],
          },
        ],
      }
      option && myChart.setOption(option)
    },
  },
}
</script>
<style lang="scss" scoped>
// 顶部竞赛名称模块
.contest_bg {
  width: 100%;
  background-color: #ffffff;
  // 竞赛总览 start
  .contest {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    .contest_logo {
      margin: 20px 20px 20px 0px;
      overflow: hidden;
      border-radius: 5px;
      img {
        width: 200px;
        height: 204px;
      }
    }
    .contest_info {
      margin: 30px 0 25px 0;
      flex: 1;
      .contest_title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        div {
          display: flex;
          align-items: center;
          .title_text {
            font-size: 24px;
            font-weight: Regular;
            color: #000000;
          }
          .contest_type {
            display: flex;
            justify-content: center;
            font-size: 14px;
            margin-left: 15px;
            width: 57px;
            height: 22px;
            line-height: 22px;
            color: #ffffff;
          }
          .timing-color {
            background-color: #13b5b1;
          }
          .simulation-color {
            background: #eb6100;
          }
          .free-color {
            background: #295ef6;
          }
        }
        .contest_status {
          width: 57px;
          height: 22px;
          display: flex;
          justify-content: center;
          line-height: 22px;
          border: 1px solid blue;
          color: blue;
        }
      }
      .title_explain {
        margin-top: 15px;
        font-size: 14px;
        height: 46px;
        width: 90%;
      }
      .time {
        margin-top: 60px;
        font-size: 14px;
      }
      .count_down {
        margin-top: 17px;
        font-size: 12px;
      }
      .contest_type2 {
        float: right;
        .type {
          width: 57px;
          height: 22px;
          line-height: 22px;
          color: #ffffff;
          background-color: #13b5b1;
          text-align: center;
          font-size: 14px;
          margin-right: 8px;
          float: left;
        }
        .people_nums {
          text-align: center;
          line-height: 22px;
          font-size: 14px;
          color: gray;
          float: left;
        }
      }
    }
  }
  // 竞赛总览 end
}
// 顶部竞赛名称模块--end

// 任务列表 start
.task_list {
  width: 1200px;
  margin: 15px auto;
  display: flex;
  justify-content: space-between;
  //左侧任务信息
  .list_left {
    width: 851px;
    .task_item {
      width: 851px;
      height: 160px;
      background: #ffffff;
      box-shadow: 0px 0px 17px 1px rgba(230, 227, 226, 0.53);
      border-radius: 10px;
      overflow: hidden;
      margin: 0 20px 29px 0;
      display: flex;
      .task_logo {
        img {
          width: 162px;
          height: 160px;
        }
      }
      .task_info {
        margin: 32px 0 52px 28px;
        .task_title {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          margin-bottom: 21px;
          .task_title_text {
            height: 23px;
            font-size: 20px;
            font-weight: 400;
            color: #407cc0;
            line-height: 23px;
            margin-right: 22px;
          }
          .task_type_wait,
          .task_type_finish {
            width: 80px;
            height: 23px;
            border-radius: 19px;
            text-align: center;
            font-size: 14px;
            font-weight: 400;
            line-height: 23px;
          }
          .task_type_wait {
            background-color: #a6c9f1;
            color: #3c86ea;
          }
          .task_type_finish {
            background-color: #d0ffce;
            color: #25c72d;
          }
        }
        .task_explain {
          width: 95%;
          height: 50px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          font-size: 14px;
          font-weight: 400;
          color: #2a3645;
          line-height: 24px;
        }
      }
    }
  }
  // 右侧信息总览及排名
  .list_right {
    // 赛题统计
    .contest_statistics {
      width: 323px;
      height: 215px;
      background: #ffffff;
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
      border-radius: 5px;
      margin-bottom: 24px;
      padding: 40px 0 0 0;
      .statistics_title {
        margin: 0 0 25px 26px;
        width: 96px;
        height: 24px;
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #2a3645;
        line-height: 24px;
      }
      .team_info {
        color: #3c86ea;
        margin-right: 50px;
        text-align: end;
        &:hover {
          color: #13b5b1;
          cursor: pointer;
        }
      }
      .statistics_echarts {
        margin: 0 34px 44px 22px;
        width: 267px;
        height: 119px;
        display: flex;
        .echarts {
          width: 119px;
          height: 119px;
        }
        .echarts_info {
          flex: 1;
          font-size: 14px;
          font-weight: 400;
          color: #555555;
          .submit_info {
            display: flex;
            flex-flow: wrap row;
            justify-content: center;
            .yes,
            .no {
              margin-top: 20px;
              display: flex;
              align-items: center;
              img {
                width: 17px;
                height: 17px;
              }
            }
          }
          .my_rank {
            margin-top: 30px;
            text-align: center;
          }
        }
      }
    }
    // 排行榜
    .contest_Rank {
      width: 323px;
      height: 315px;
      background: #ffffff;
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
      border-radius: 5px;
      padding: 40px 0 0 0;
      font-size: 13px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #555555;
      .rank_title {
        margin: 0 0 26px 26px;
        height: 24px;
        font-size: 24px;
        font-weight: 400;
        color: #2a3645;
        line-height: 24px;
      }
      .rank {
        width: 263px;
        height: 250px;
        margin: 0 35px 36px 25px;
        display: flex;
        flex-flow: wrap;
        justify-content: space-between;
        .rank_item {
          width: 100%;
          height: 40px;
          display: flex;
          justify-content: space-between;
          img {
            width: 18px;
            height: 19px;
          }
          .number_and_time {
            text-align: center;
            .time {
              margin-top: 5px;
            }
          }
        }
      }
    }
  }
}
// 任务列表 end
</style>